<template>
  <div class="full-box shadow-box padding-box">
    <OperateCommon
      :showSave="true"
      :showBack="true"
      @save="save"
      @back="linkTo('/userList')"
    >
    </OperateCommon>
    <div class="c-form-padding">
      <el-form
        class="c-form"
        :model="form"
        ref="form"
        :rules="rules"
        label-width="100px"
        :inline="false"
      >
        <el-form-item label="用户账号" prop="user_code">
          <el-input v-model="form.user_code" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="user_code">
          <el-input v-model="form.user_name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="dept_id">
          <DeptCascader
            :defaultChecked.sync="form.dept_id"
            :options="deptTree"
            @change="changeDept"
          ></DeptCascader>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            style="width: 300px; margin-right: 10px"
            v-model="form.phone"
            placeholder=" "
          ></el-input>
          <!-- <el-button v-if="form.id > 0" type="primary" @click="getDDAID"
            >获取浙政顶用户信息</el-button
          > -->
        </el-form-item>
        <el-form-item label="浙政钉姓名" prop="real_name">
          <el-input
            style="width: 300px; margin-right: 10px"
            v-model="form.real_name"
            placeholder=" "
          ></el-input>
          <!-- <el-button v-if="form.id > 0" type="primary" @click="getDDAID"
            >获取浙政顶用户信息</el-button
          > -->
        </el-form-item>
        <el-form-item label="角色" prop="RoleIDs">
          <el-select v-model="form.RoleIDs" multiple filterable placeholder="">
            <el-option
              v-for="item in roles"
              :key="item.value"
              :label="item.role_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务">
          <el-select
            v-model="form.duty"
            placeholder=""
            clearable
            multiple
            filterable
          >
            <el-option
              v-for="(item, index) in title"
              :key="index"
              :label="item.dict_label"
              :value="item.dict_label"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="领导排序" prop="sort">
          <el-input style="width: 130px" v-model.number="form.sort"> </el-input>
        </el-form-item>
        <el-form-item label="大屏领导类型" prop="type">
          <el-select v-model="form.type" value-key="" placeholder="" clearable>
            <el-option
              v-for="item in leaderType"
              :key="item.id"
              :label="item.dict_label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!--  -->
        <el-form-item label="是否APP用户" prop="app_user">
          <el-select v-model="form.app_user" placeholder="">
            <el-option :key="0" label="否" value="0"></el-option>
            <el-option :key="1" label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="APP批示权限" prop="instruction_user">
          <el-select v-model="form.instruction_user" placeholder="">
            <el-option :key="0" label="禁用" value="0"></el-option>
            <el-option :key="1" label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否大屏用户" prop="cockpit_user">
          <el-select v-model="form.cockpit_user" placeholder="">
            <el-option :key="0" label="否" value="0"></el-option>
            <el-option :key="1" label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-switch
            v-model="form.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="0"
            inactive-value="1"
          >
          </el-switch>
          <span> {{ form.state == 0 ? "已启用" : "已禁用" }} </span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import DeptCascader from "@/components/Common/DeptCascader.vue";
import LinkTo from "@/mixins/LinkTo";
import { getDeptTree } from "@/api/System/Department";
import { getRoleList } from "@/api/System/Role";
import {
  getDingAccount,
  getLeaderType,
  getTitleList,
  getUserDetail,
  postUserSave,
} from "@/api/System/User";
import { required } from "@/utils/eValidate";
export default {
  name: "User",
  mixins: [LinkTo],
  components: { OperateCommon, DeptCascader },
  data() {
    return {
      id: 0,
      form: {
        user_code: "",
        user_name: "",
        dept_id: "",
        dept_name: "",
        phone: "",
        real_name: "",
        duty: [],
        type: "",
        sort: undefined,
        RoleIDs: [],
        app_user: "",
        instruction_user: "",
        cockpit_user: "",
        // 0 启用 1 禁用
        state: "0",
      },
      rules: {
        user_code: [required],
        user_name: [required],
        dept_id: [required],
        RoleIDs: [required],
      },
      deptTree: [],
      roles: [],
      title: [],
      leaderType: [],
    };
  },
  methods: {
    initLeaderType() {
      getLeaderType().then((res) => {
        if (res.code == 0) {
          this.leaderType = res.data;
        }
      });
    },
    initRoles() {
      getRoleList({ pageNum: 1, pageSize: 999 }).then((res) => {
        if (res.code == 0) {
          this.roles = res.data;
        }
      });
    },
    initTitle() {
      getTitleList().then((res) => {
        if (res.code == 0) {
          this.title = res.data;
        }
      });
    },
    initDept() {
      getDeptTree().then((res) => {
        if (res.code == 0) {
          this.deptTree = res.data;
        }
      });
    },
    initData() {
      getUserDetail({ id: this.id }).then((res) => {
        if (res.code == 0) {
          this.form = res.data;
          if (this.form.duty.trim() != "") {
            this.form.duty = this.form.duty.split(",");
          }
        }
      });
    },
    changeDept(val) {
      this.form.dept_name = val.label;
      this.form.dept_id = val.value;
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.duty != "") {
            this.form.duty = this.form.duty.join(",");
          }

          postUserSave(this.form).then((res) => {
            if (res.code == 0) {
              this.$message.success("保存成功");
              this.linkTo("/userList");
            }
          });
        }
      });
    },
    getDDAID() {
      if (this.form.phone.trim() == "") {
        this.$message.error("请输入当前用户手机号码");
        return;
      }

      getDingAccount({
        id: this.form.id,
        mobile: this.form.phone,
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success("绑定成功");
          this.linkTo("/userList");
        }
      });
    },
  },
  created() {
    this.initRoles();
    this.initDept();
    this.initTitle();
    this.initLeaderType();
    this.id = this.$route.params.id;
    if (this.id > 0) {
      this.initData();
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/base-form.scss";
</style>
